<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <SearchBar :show-search="true">
      <template slot="peopleSearch">
        <el-form-item label="人员搜索：">
          <el-row type="flex">
            <el-input placeholder="请输入" style="width: 300px;" />
          </el-row>
        </el-form-item>
      </template>
      <!-- 角色插槽 -->
      <template slot="roleSelect">
        <el-row type="flex">
          <el-form-item label="角色：" class="el-form-item__content">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-row>
      </template>
    </SearchBar>
    <!-- 新增 -->
    <el-card>

      <!-- 表格表单 -->
      <el-row>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%; "
          :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="180"
          />
          <el-table-column
            prop="name"
            label="人员名称"
            width="180"
          />

          <el-table-column
            prop="role"
            label="角色"
          />
          <el-table-column
            prop="mobile"
            label="联系电话"
          />
          <el-table-column
            prop="mobile"
            label="完成工单(本月)"
          />
          <el-table-column
            prop="mobile"
            label="进行中工单"
          />
          <el-table-column
            prop="mobile"
            label="拒绝工单(本月)"
          />
          <el-table-column

            label="操作"
            width="100"
          >
            <template>
              <el-button type="text" size="small">查看详情</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
export default {
  components: {
    SearchBar
  },
  data() {
    return {
      value: '',
      tableData: [{
        id: '1',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        role: '维修员',
        mobile: '010-6666666'
      }, {
        id: '2',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        role: '维修员',
        mobile: '010-6666666'
      }, {
        id: '3',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        role: '维修员',
        mobile: '010-6666666'
      }, {
        id: '4',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        role: '维修员',
        mobile: '010-6666666'
      }],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }]
    }
  }

}
</script >

<style lang="scss" scoped>
.el-form-item__content {
  display: flex;
  margin-left: 10px;
}
</style>
